<script setup>
	import {ref} from 'vue';
	import categoryApi from "@/api/product/category.js";
	import {ElMessage, ElMessageBox} from "element-plus";
	import {Delete, Plus, Download, Upload, Message, Edit, Search} from "@element-plus/icons-vue";
	
	// 定义list属性模型
	const list = ref([])
	
	//加载数据
	const loadData = () => {
		categoryApi.selectCategoryTree().then(result => {
			list.value = result.data
		})
	}
	loadData()
	
	//单个删除
	const deleteById = (id) => {
		ElMessageBox.confirm(
			'您确认要删除么?',
			'警告',
			{
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
				lockScroll: false //防止抖动
			}
		).then(() => {
			categoryApi.deleteById(id).then(result => {
				if (result.code === 0) {
					ElMessage({message: result.msg, type: 'success',})
				} else {
					ElMessage.error(result.msg)
				}
				loadData()
			})
		})
	}
	
	//添加、编辑
	const dialogFormVisible = ref(false)
	const category = ref({})
	const title = ref()
	//添加
	const showAddDialog = (id) => {
		dialogFormVisible.value = true
		title.value = '添加'
		category.value = {}
		category.value.parentId = id
	}
	//编辑
	const showUpdateDialog = (id) => {
		dialogFormVisible.value = true
		title.value = '编辑'
		category.value = {}
		categoryApi.selectById(id).then(result => {
			category.value = result.data
		})
	}
	//点击确定
	const addOrUpdate = () => {
		if (category.value.id) {//编辑
			categoryApi.update(category.value).then(result => {
				if (result.code === 0) {
					ElMessage({message: result.msg, type: 'success',})
					dialogFormVisible.value = false
				} else {
					ElMessage.error(result.msg)
				}
				loadData()
			})
		} else {//添加
			categoryApi.add(category.value).then(result => {
				if (result.code === 0) {
					ElMessage({message: result.msg, type: 'success',})
					dialogFormVisible.value = false
				} else {
					ElMessage.error(result.msg)
				}
				loadData()
			})
		}
	}
	
	//上传图标图片
	import {useTokenStore} from '@/store/token.js'
	const tokenStore = useTokenStore()
	const handleAvatarSuccess = (result) => {
		category.value.image = result.data
	}
	const headers = ref({
		//添加token
		Authorization: tokenStore.token
	})
</script>

<template>
	<div class="back">
		<el-card class="">
			<template #header>
				<div class="header">
					<el-button type="success" :icon="Plus" @click="showAddDialog(0)">添加一级分类</el-button>
				</div>
			</template>
			<el-table
				:data="list"
				style="width: 100%"
				row-key="id"
				border
				lazy
				:load="loadData"
				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
			>
				<el-table-column prop="name" label="分类名称" align="center" min-width="150"/>
				<el-table-column prop="image" label="图标" #default="scope" align="center" min-width="150">
					<img :src="scope.row.image" width="50"/>
				</el-table-column>
				<el-table-column prop="orderNum" label="排序" align="center" min-width="90"/>
				<el-table-column prop="status" label="状态" #default="scope" align="center" min-width="90">
					{{ scope.row.status == 1 ? '正常' : '停用' }}
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" min-width="210" align="center"/>
				<el-table-column label="操作" align="center" fixed="right" min-width="330"  #default="scope">
					<el-button
						type="success"
						:icon="Plus"
						@click="showAddDialog(scope.row.id)"
					>添加子分类</el-button>
					<el-button
						type="primary"
						:icon="Edit"
						@click="showUpdateDialog(scope.row.id)"
					>修改</el-button>
					<el-button
						type="danger"
						:icon="Delete"
						@click="deleteById(scope.row.id)"
						:disabled="scope.row.children?.length > 0"
					>删除</el-button>
				</el-table-column>
			</el-table>
		</el-card>
	</div>
	
	<!--添加、编辑弹出框-->
	<el-dialog v-model="dialogFormVisible" :title="title" width="500" :lock-scroll="false">
		<el-form :model="category">
			<el-form-item label="分类名称:" :label-width="100">
				<el-input v-model="category.name" autocomplete="off"/>
			</el-form-item>
			<el-form-item label="图&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;标:" :label-width="100">
				<el-upload
					class="avatar-uploader"
					action="/api/product/upload"
					:show-file-list="false"
					:on-success="handleAvatarSuccess"
					:headers="headers"
				>
					<img v-if="category.image" :src="category.image" class="avatar"/>
					<el-icon v-else class="avatar-uploader-icon">
						<Plus/>
					</el-icon>
				</el-upload>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取消</el-button>
				<el-button type="primary" @click="addOrUpdate">
					确认
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<style scoped>
	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>